{template 'tpl_header'}

<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" action="#">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText"
               style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="swiper-container">
    <div class="swiper-wrapper">
        {loop $dest['thumbs'] $thumbs}
        <div class="swiper-slide">
            <img src="{php echo tomedia($thumbs)}"/>
        </div>
        {/loop}
    </div>
    <div class="swiper-pagination"></div>
</div>

<div class="btn_space_area">
    <a href="{php echo url('entry', array('m' => 'vj_bontrip','do' => 'single','id' => $id),true); }"
       class="weui-btn weui-btn_mini weui-btn_default">单品 ( {$dest['single_number']} )</a>
    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">一日游 ( {$dest['oneday_number']} )</a>
    <a href="{php echo url('entry', array('m' => 'vj_bontrip','do' => 'quality','id' => $id),true); }"
       class="weui-btn weui-btn_mini weui-btn_default">精品游 ( {$dest['quality_number']} )</a>
</div>

<div class="weui-body__bg_color">
    {if !empty($onedays) }
    {loop $onedays $oneday}
    <div class="weui-flex weui-flex__col2" style="position: relative">
        <div class="weui-flex weui-flex__col2">
            <a href="{php echo url('entry', array('m' => 'vj_bontrip','do' => 'goods','id' => $oneday['id'],'type' => 'oneday'),true);}"
               class="weui-flex__item weui-flex__col2__style2">
                <img src="{php echo tomedia($oneday['thumb'])}">
                <div class="weui-flex__col2__style2__title">
                    <span>{$oneday['name']}</span>
                </div>
                <div class="weui-flex__col2__style2__desc">
                    <span>{$oneday['introduction']}</span>
                </div>
                {if !empty($oneday['tag']) }
                <div class="weui-flex__col2__style2__place" style="display: inherit;">
                    {php $tags = explode(',',$oneday['tag']) }
                    {loop $tags $tag}
                    <span class="weui-flex__col2__style2__label">{$tag}</span>
                    {/loop}
                    <div style="clear: both;"></div>
                </div>
                {/if}
                <div class="weui-flex__col2__style2__price">
                    <span>¥{php echo round($oneday['adult_price']*$oneday['exchange_rate'])}／人起</span>
                </div>
            </a>
            {if !empty($oneday['label']) }
            <div class="weui-flex__col2__top_tag">
                <div class="weui-flex__col2__top_tag_content">
                    <span>&bull;</span><br>
                    <span>{$oneday['label']}</span>
                </div>
                <div class="weui-flex__col2__top_tag_border"></div>
            </div>
            {/if}
        </div>
    </div>
    {/loop}
    {else}
    <div id="list_null" class="weui-loadmore weui-loadmore_line">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>
    {/if}
</div>
<div id="loading" class="weui-loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>

<div class="weui-whitespace weui-whitespace__xl"></div>


{template 'tpl_footer'}

<script src="{MOBILE_RES}js/swiper.min.js"></script>
<script>
    $('#loading').hide();
    var oneday_page = 2;
    var oneday_is_next = '{$is_next}';
    var dest_id = '{$id}';
    $(function () {
        $(".swiper-container").swiper({
            loop: true,
            autoplay: 3000
        });
        $(document).scroll(function () {
            //当滚动条到底部时请求数据
            if ($('body').scrollHeight() - $('body').height() - 3 <= $(window).scrollTop()) {
                if (oneday_is_next == '1') {
                    //防止重复请求
                    oneday_is_next = '0';
                    $('#loading').show();
                    var data = {
                        'action': 'oneday_list',
                        'page': oneday_page,
                        'dest_id': dest_id,
                    };
                    $.ajax({
                        url: "{php echo $this->createMobileUrl('ajax')}",
                        type: 'post',
                        data: data,
                        dataType: 'json',
                        success: function (res) {
                            if (res.status == 1) {
                                oneday_is_next = (res.data.is_next) ? '1' : '0';
                                console.log(res.data.list);
                                $('#loading').hide();
                                oneday_page++;
                                add_oneday(res.data.list);
                            } else {
                                $.toast(res.msg, "cancel");
                            }

                        },
                        error: function (res) {
                            $.toast('请求失败，请检测网络或联系客服', "cancel");
                        }
                    });
                }
            }
        });
        $('.weui-search-bar__form').submit(function (event) {
            event.preventDefault();
            var url = "{php echo url('entry', array('m' => 'vj_bontrip','do' => 'oneday','id' => $id),true); }";
            window.location.href = url + "&search=" + $('#searchInput').val();
        });
    });


    function add_oneday(list) {
        var html = '';
        for (li in list) {
            var url = "{php echo url('entry', array('m' => 'vj_bontrip','do' => 'goods','type' => 'oneday'),true);}";
            url += "&id=" + list[li].id;
            html += '<div class="weui-flex weui-flex__col2" style="position: relative">\n' +
                '        <div class="weui-flex weui-flex__col2">\n' +
                '            <a href="' + url + '" class="weui-flex__item weui-flex__col2__style2">\n' +
                '                <img src="' + list[li].thumb + '">\n' +
                '                <div class="weui-flex__col2__style2__title">\n' +
                '                    <span>' + list[li].name + '</span>\n' +
                '                </div>\n' +
                '                <div class="weui-flex__col2__style2__desc">\n' +
                '                    <span>' + list[li].introduction + '</span>\n' +
                '                </div>\n';

            if (list[li].tag != null) {
                html += '<div class="weui-flex__col2__style2__place" style="display: inherit;">';
                for (tag in list[li].tag) {
                    html += '<span class="weui-flex__col2__style2__label">' + list[li].tag[tag] + '</span>\n';
                }
                html += '<div style="clear: both;"></div></div>';
            }

            html += '                <div class="weui-flex__col2__style2__price">\n' +
                '                    <span>¥' + list[li].adult_price + '／人起</span>\n' +
                '                </div>\n' +
                '            </a>\n';
            if (list[li].label != '') {
                html += '<div class="weui-flex__col2__top_tag">\n' +
                    '                <div class="weui-flex__col2__top_tag_content">\n' +
                    '                    <span>&bull;</span><br>\n' +
                    '                    <span>' + list[li].label + '</span>\n' +
                    '                </div>\n' +
                    '                <div class="weui-flex__col2__top_tag_border"></div>\n' +
                    '            </div>'
            }
            html += '        </div>\n' +
                '    </div>';
        }
        $('.weui-body__bg_color').append(html);
    }
</script>